<template>
  <view class="container">
    <view class="header">课程助手</view>

    <view class="section">
      <view
        v-for="(item, index) in dataList"
        :key="index"
        class="section-block"
      >
        <view class="section-title">{{ item.purpose }}</view>
        <view
          v-for="(exercise, eIndex) in item.exercises"
          :key="eIndex"
          class="card"
          @click="editExercise(exercise, eIndex, index)"
        >
          <view class="card-title">{{ exercise.name }}</view>
          <view class="card-detail">
            {{ exercise.sets }} 组 X {{ exercise.reps.count
            }}{{ getUnitLabel(exercise.reps.unit) }} | {{ exercise.weighs }} |
            间休 {{ exercise.interval }}秒
          </view>
        </view>
      </view>
    </view>

    <view class="timer" v-if="isClassStarted">
      <text>{{ formatTime(elapsedTime) }}</text>
    </view>

    <view class="action-buttons">
      <view
        class="button-card start"
        @click="startClass"
        v-if="!isClassStarted"
      >
        <text>开始上课</text>
      </view>

      <view class="button-card timer" @click="goUrl">
        <text>使用计时器</text>
      </view>

      <view class="button-card end" @click="endClass">
        <text>结束课程</text>
      </view>
    </view>

    <u-modal :show="show" :title="title" @confirm="confirm">
      <u-input placeholder="请输入动作名称"></u-input>
    </u-modal>
  </view>
</template>

<script>
import { planDetails, stop, start } from "../../api/fit";
export default {
  data() {
    return {
      isQianzi: false,
      show: false,
      title: "添加动作",
      dataList: [],
      planName: "",
      unitOptions: [
        { label: "次", value: "c" },
        { label: "秒", value: "s" },
        { label: "分", value: "m" },
      ],
      isClassStarted: false,
      startTime: 0,
      elapsedTime: 0,
      timer: null,
      info: {},
    };
  },
  onLoad(options) {
    console.log(options, "options");

    this.id = options.id;
    this.getInfo();
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    async getInfo() {
      const res = await planDetails(this.id);
      this.dataList = res.data.nodes;
      this.planName = res.data.planName;
      this.info = res.data;
    },
    getUnitLabel(unit) {
      const option = this.unitOptions.find((opt) => opt.value === unit);
      return option ? option.label : "";
    },
    async startClass() {
      const res = await start(this.info.id);
      console.log(res, "res");
      this.isClassStarted = true;
      this.startTime = Date.now();
      this.timer = setInterval(() => {
        this.elapsedTime = Date.now() - this.startTime;
      }, 1000);
    },
    async endClass() {
      if (this.isQianzi) {
        // 处理已签字逻辑
      } else {
        clearInterval(this.timer);
        this.isClassStarted = false;
        this.elapsedTime = 0;
        const res = await stop({
          id: this.info.id,
          izSign: "2",
        });
        console.log(res, "res");
        if (res.code === 200) {
          uni.showToast({
            title: '课程已结束',
            icon: 'success',
            duration: 2000,
            success: () => {
              setTimeout(() => {
                uni.navigateBack();
              }, 2000);
            }
          });
        }
      }
    },
    goUrl() {
      uni.navigateTo({
        url: "/pages/jishi/index",
      });
    },
    confirm() {
      this.show = false;
    },
    editExercise(exercise, eIndex, sectionIndex) {
      // 编辑动作逻辑
      console.log(`编辑动作: ${exercise.name}`);
    },
    formatTime(ms) {
      const seconds = Math.floor(ms / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);

      const formattedHours = hours < 10 ? `0${hours}` : hours;
      const formattedMinutes =
        minutes % 60 < 10 ? `0${minutes % 60}` : minutes % 60;
      const formattedSeconds =
        seconds % 60 < 10 ? `0${seconds % 60}` : seconds % 60;

      return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;
}

.header {
  font-size: 48rpx;
  font-weight: 900;
  color: #000;
  padding: 40rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section {
  margin-bottom: 30rpx;
}

.section-block {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
}

.card {
  background: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  transform: translateY(0);
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #000;
  margin-bottom: 10rpx;
}

.card-detail {
  font-size: 28rpx;
  color: #666;
}

.timer {
  font-size: 48rpx;
  font-weight: 600;
  color: #000;
  text-align: center;
  padding: 20rpx 0;
}

.action-buttons {
  margin-top: 40rpx;
}

.button-card {
  background: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  transform: translateY(0);
  transition: all 0.3s ease;

  &.start {
    background: #4caf50;
    color: #fff;
    box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.4);

    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 2rpx 10rpx rgba(76, 175, 80, 0.2);
    }
  }

  &.timer {
    background: #000;
    color: #fff;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);

    &:active {
      transform: translateY(4rpx);
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
    }
  }

  &.end {
    background: #fff;
    color: #000;
    border: 3rpx solid #000;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    }
  }
}
</style>
